<template>
  <div class="app">
    <h1>{{ firstname + '-' + lastname }}</h1>
    <h1>{{ fullname }}</h1>
    <button @click="changeFullname">changeFullname</button>
  </div>
</template>
<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const firstname = ref('qf')
    const lastname = ref('html5')

    // const fullname = computed(() => {
    //   return firstname.value + '-' + lastname.value
    // })

    const fullname = computed({
      get() {
        return firstname.value + '-' + lastname.value
      },
      set(val) {
        // console.log(val)
        const arr = val.split('-')
        // firstname.value = arr[0]
        lastname.value = arr[1]
      }
    })

    const changeFullname = () => {
      fullname.value = 'qf-大数据'
    }

    return {
      firstname,
      lastname,
      fullname,
      changeFullname
    }
  }
}
</script>
<style lang="scss" scoped></style>
